vue中使用keep

前不久给一个老哥解决一个问题，他出现的问题是，每访问一次组件，切换组件的时候会把其他访问过的组件的网络请求全部重新发一遍，老哥找了几天，也找了很多人请教，没发现问题，我花了一个小时找出问题所在，没错就是keep-alive这个标签的锅。而且这个老哥比较狠的是，他不是简单的用keep-alive包裹页面切换的router-view，而是包裹在了app.vue里的router-view里....大概结构长这样

当去掉app.vue里的keep-alive之后问题就解决了，借此契机，咱们今天详细讲讲，这个keep-alive，到底是怎么个用法。

大家都知道，在vue里，每次路由切换或者组件切换或者重新加载，都会重新创建一个新的vue组件实例，会重头执行一遍created,mounted,destroy等一个完整的vue生命周期，并且数据全部都会初始化。

每次都重新载入一个新的组件实例，这样挺好，保证啥都是新的，爱咋用就咋用。但是在某些业务场景下，可能不太好了哟。比如我现在有一个表单页面，我填写表单的同时，可能需要回去上一级页面查看一些信息来填入表单，你按照使用的惯例通过路由回到上一页，当你查看完上级组件的信息在切回表单界面会发现，表单信息全部都没了这样就显得很不友好了。接下来，需要一些手段保留组件的状态，那就是keep-alive的作用啦。

先看看官方定义： 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

被keep-alive包裹的组件，会被保留在组件树里，你可以继续操作其他叶子节点的组件，但是其他叶子节点的组件还会正常经历创建，生成，销毁的完整的声明周期，你重新访问组件的时候什么都是新的了，而这个被keep-alive包裹的组件就一直长在树上了，会一直存在，除了会经历创建生成，在页面卸载之前不会被销毁，你可以浅薄的理解为，像闭包一样保存在内存中不会消亡。在Vue中，就体现为，始终将该组件保留在虚拟DOM中，并且保持该组件以及后代组件的状态，只不过不渲染而已了，这里敲下黑板，注意一下，是始终将该组件保留在虚拟DOM中，并且保持该组件以及后代组件的状态但是不渲染了。嗯，没错，你引入的组件的后代组件也会被缓存的。

好嘛，聊到这里，你大概有疑问了，我要是用keep-alive包裹住router-view怎么办？那岂不是从这个路由出口加载的组件全部都要被缓存了，那位大哥的问题不就一直存在了吗？那咋办？好的，接下来聊聊如何选择性的缓存需要缓存的组件。

大家知道，每个组件在router中，都有一个name值，就是这样的

在keep-alive标签上，存在两个属性（以下定义是个人总结，请重点记忆）：

include：包含，包含在这个集合或者用正则匹配到的name值的组件会被缓存

exclude：排查 包含在这个集合或者用正则匹配到的name值的组件不会被缓存

include和exclude会根据匹配的值返回一个布尔值，当然这个布尔值不是你来操控，而是keep-alive组件内部操作的，它会根据你传入的组件name来决定是这个布尔值如何体现，就是简单需要缓存和不需要缓存的区别。读到这里不理解，回头看看上面对include和exclude的定义。

并且官方还提供了三种匹配模式，分别是：数组、逗号隔开的字符串和正则表达式，个人比较倾向于数组，因为数组就像一个白名单或者黑名单，语义化明确，好维护。当然了，你爱用啥用啥，看个人习惯。

嘿嘿，没想到吧，keep-alive也有生命周期，但是很简单，就两个

有点像mounted或者created一样，会在合适的契机执行该函数。这个没啥说的了。就是激活（载入）组件和失活（移除）组件执行的函数，这里需要小小注意一下，这里得载入组件的意思是，载入DOM，移除组件的意思是移除DOM，但是组件还是保留在虚拟DOM树的哦。嗯...有点像v-show的味道，但是其中的区别要好好理解，如果忘记了，自己复习下v-if和v-show的区别吧。

keep-alive标签有一个max属性，传入的是一个number数据类型，根据数字大小来缓存一个最大缓存组件的上限，像这样用

这里值得注意的是，设置了最大缓存组件上限的时候，会形成一个堆的数据结构的含义。当你设置的需要缓存的组件数量超过了max的限制，那么就会移除堆底的的元素，简而言之就是按照先进先出的规则操作。当到达缓存组件上限之后会移除最先缓存的第一个组件，并把新的缓存组件推入堆顶。

数字表示为： 1到10 是10个缓存的组件，当出现第11个需要缓存的组件的时候，会把10移除，然后9变成10，8变成9，7变成8...依次类推，然后11变成了1放在堆顶，就又保持了1到10的限制。

数据结构的东西不多说了，意会即可，反正我也不会。

好了，关于keep-alive的介绍和理解就到这里了，下次见！